import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Banner, HotTag, SongSheet, Singer } from '../entity';
import { NzCarouselComponent } from 'ng-zorro-antd';
import { PlayMode } from 'src/app/store/entity';
import { SongSheetService } from 'src/app/shared';
import { StoreActionService } from 'src/app/store/store-action.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {

  @ViewChild(NzCarouselComponent, { static: true })
  private carouselComponent: NzCarouselComponent;

  banners: Array<Banner>;
  hotTags: Array<HotTag>;
  songSheets: Array<SongSheet>;
  singers: Array<Singer>;
  isSongSheetLoading = false;

  /** 轮播图下标，默认从 0 开始 */
  carouselActiveIndex = 0;

  playMode: PlayMode;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private songSheetService: SongSheetService,
    private storeActionService: StoreActionService
  ) { }

  ngOnInit(): void {
    this.activatedRoute.data.subscribe(
      ({ homeData: [banners, hotTags, songSheets, singers] }) => {
        this.banners = banners;
        this.hotTags = hotTags;
        this.songSheets = songSheets;
        this.singers = singers;
      }
    );
  }

  onBeforeChange({ to }): void {
    this.carouselActiveIndex = to;
  }

  onChangeSlide(type: string): void {
    this.carouselComponent[type]();
  }

  onPlaySheet(id: number): void {
    this.songSheetService.getSongSheets(id).subscribe(
      res => {
        this.storeActionService.updatePlayList({list: res, index: 0});
      }
    );
  }

  routerToSongDetail(id: number): void {
    this.router.navigateByUrl(`/music/sheets/${id}/detail`);
  }
}
